<style>
    #mine_bar{
	    background-color:red;
    }
    #mine_title{
        margin: auto;
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
    }
    .bui-scroll{
        background-color: white;
    }
    #listcontainer{
        color: white;
        height: auto;
        margin-top: 3%;
        margin-left: 4%;
        margin-right: 4%;
        

    }
    #panelcontainer{
        width: 100%;
        height: 100%;
    }
    #activityname{
        text-align: center;
        width: 100%;
        height:30px;
        overflow: hidden;  
        white-space: nowrap;
        text-overflow: ellipsis;
        
    }
    .nop{
        width: 100%;
        overflow: hidden;  
        white-space: nowrap;
        text-overflow: ellipsis;
        
    }
    
    .buttonlist{
        text-align: center;
        margin-top: 8%;
        width: 100%;
        height:40px;
        
    }
    .btn-detail{
        shape-outside: border-box;
        background-color:transparent;
        border-radius: 60px;
        float: left;
        margin-left: 5%;
        border-color: white;
        height: 30px;
        width: 20%;
		border-style: solid;
    }
    .btn-cancel{
        shape-outside: border-box;
        background-color:transparent;
        border-radius: 60px;
        float: left;
        margin-left: 5%;
        border-color: white;
        height: 30px;
        width: 20%;
		border-style: solid;
    }
    .btn-share{
        shape-outside: border-box;
        background-color:transparent;
        border-radius: 60px;
        float: left;
        margin-left: 5%;
        border-color: white;
        height: 30px;
        width: 20%;
		border-style: solid;
    }
    .btn-photo{
        shape-outside: border-box;
        background-color:transparent;
        border-radius: 60px;
        float: left;
        margin-left: 5%;
        border-color: white;
        height: 30px;
        width: 20%;
		border-style: solid;
    }

    
    #dialogLeft {
        right: 10%;
    }
    .container{
            width: 100%;
    }
    .img-lists{
        position: relative;
        float: left;
        width: 25vw;
        height: 25vw;
        margin-top: 3%;
        margin-left: 2.5%;
    }
    .img-listsadd{
        float: left;
        width: 25vw;
        height: 25vw;
        margin-top: 3%;
        margin-left: 2.5%;
    }
    .img-listsadd img{
        width: 100%;
        height: 100%;
        display: block;
        object-fit:cover;
    }
    .img-lists img{
        width: 100%;
        height: 100%;
        display: block;
        object-fit:cover;
    }
    .clearfix:after{
        content:'';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }

    #checkphoto1{
        height: 100%;
        width: 100%;
        background-color: black;
    }
    #checkphoto2{
        height: 100%;
        width: 100%;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: black;
    }

    .del_btn1{
        shape-outside: border-box;
        background-color:transparent;
        margin:auto;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        border-color: white;
        height: 30px;
        width: 100%;
    }
    .del_btn2{
        shape-outside: border-box;
        background-color:transparent;
        margin:auto;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        border-color: white;
        height: 30px;
        width: 100%;
    }

    .delbox{
        position: absolute;
        z-index: 100;
        left:0;
        top: 0;
        width: 5vw;
        height: 5vw;
    }
    .header-box4{
        background-color: red;
        height: 1.085rem;
    }
    .header-left4{
        margin-left: 0rem;
        background-color: red;
        color: white;
        width: 1rem;
    }
    .header-left4 .bui-btn{
        background-color: red;
        border-width: 0rem;
        
    }
    .header-title4 {
        font-size: 0.4rem;
        height: 1.085rem;
        font-family: 'Microsoft YaHei';
        font-weight: bold;
        
        color: white;
        letter-spacing: 0.05rem;
        width: 100%;
        text-align: center;
    }

    .like{
        width: 70px;
        height: 80px;
        z-index: 1000;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .thrumbs{
        margin-left: 15px;
    }
    .thrumbs-num{
        text-align: center;
        font-size: 15px;
        margin-top: 3px;
        font-family: 'Microsoft YaHei';
        font-weight: bold;

        color: red;
    }
    
</style>



<div class="bui-page bui-box-vertical" id="myjoinactivity">
    <header>
        <div class="bui-box header-box4">
            <div class="bui-box-center header-left4">
                <a class="bui-btn" id="back_btn"><i class="icon-back"></i></a>
            </div>
            
            <div class="bui-box-center header-title4">我的参与活动</div>
        </div>
    </header>
    <main>
        <div id="scrollList" class="bui-scroll">
            <div class="bui-scroll-head"></div>
            <div class="bui-scroll-main">
                <ul class="bui-list bui-list-thumbnail">
                    




                </ul>
            </div>
            <div class="bui-scroll-foot"></div>
        </div>
    </main>
</div>

<!-- 中间自定义弹出框结构	 -->
<div id="dialogCenter" class="bui-dialog" style="display: none;">
    <div class="bui-dialog-head">活动相册</div>
    <div class="bui-dialog-main">
        <h1 id="activity_name"></h1>
        <div id="buiPhoto" class="bui-upload bui-fluid-space-4">
            
            <div class="container clearfix" id="panelfix">
                <!-- <div class="img-lists" id="test">
                   <img src="images/home/user_image.jpg"/>
                </div> -->
                <!-- <div class="img-lists">
                    <img src="images/home/user_image.jpg"/>
                </div>
                <div class="img-lists">
                     <img src="images/home/user_image.jpg"/>
                </div>
                <div class="img-lists">
                    <img src="images/home/user_image.jpg"/>
                 </div> -->
                 <div class="img-listsadd" id="add">
                    <img src="images/home/add_photo.png" multiple/>
                 </div>
                
            </div>
            
            
        </div>
    </div>
    <div class="bui-dialog-foot">
        <div class="bui-box">
            <div class="span1" id="delpanel">
                <button class="del_btn1" id="delmanager">管理</button>
            </div>
        </div>
    </div>
    <div class="bui-dialog-close"><i class="icon-close"></i></div>
</div>




<!-- 查看相册自定义弹出框结构	 -->
<div id="dialogCheck" class="bui-dialog" style="display: none;">
    <div id="checkphoto1">
        <div id="checkphoto2"></div>
        <!-- <div class="like">
            <img src="images/home/thrumbs-down.png" class="thrumbs"/>
            <h4 class="thrumbs-num" id="thrumbs-num">999万</h4>
        </div> -->
        
    </div>
    <div class="bui-dialog-close"><i class="icon-close"></i></div>
</div>




<script>
    function checkphoto(src){

        var $checkarea=$("#checkphoto2");
        console.log(src)
        // 查看照片弹出框
        var uiDialog1 = bui.dialog({
                    id: "#dialogCheck",
                    fullscreen:true,
                    appendTo: "body",
                    // mask: false,
                    // callback: function(e) {
                    //     console.log(e.target)
                    // }
                    onBeforeOpen:function(){
						$checkarea.html(Photo(src));
					}
                });
        uiDialog1.open();
    }
    function Photo(url) {
        return `<img src="${url}" style="width:auto;height:auto;max-width:100%;max-height:100%;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;"/>`
    }




    function shareHref1(actId,actName,actContent,actTime,actAddress,actMoney,actNumber,shareType){
        
        var Type=shareType;
        aid=actId;
        aname=actName;
        acon=actContent;
        atime=actTime;
        aadd=actAddress;
        amoney=actMoney;
        anumber=actNumber;
        
        
        var webMsg="?actId="+aid+
                "&actName="+aname+
                "&actContent="+acon+
                "&actTime="+atime+
                "&actAddress="+aadd+
                "&actMoney="+amoney+
                "&actNumber="+anumber;

        var wxPlus = api.require('wxPlus');
        wxPlus.isInstalled(function(ret, err) {
            if (ret.installed) {
                
                wxPlus.shareWebpage({
                apiKey: 'wxcfb87d506d8ccd19',
                scene: Type,
                title: '聚欢活动分享',
                description: '我分享了聚欢上的活动，快啦围观哦！',
                contentUrl: 'https://www.funtogether.top/share'+webMsg
                }, function(ret, err) {
                if (ret.status) {
                    bui.hint({ content: "<i class='icon-check'></i><br />分享成功", position: "center", effect: "fadeInDown" });
                } else {
                    if(err.code==2)
                        bui.hint("您已取消分享");
                    else
                        bui.hint("分享失败");

                }
                });
            }
            else{
                alert("当前设备未安装微信客户端");
                return;
            }
        });

       

    }
</script>